<template>
    <div>
        <div class="login-container" style="background-color: #141a48;margin: 0px;overflow: hidden;">
            
            <div id="canvascontainer" ref="can"></div>
            <div class="form">
                <div class="title">欢迎来到墨鱼后台管理系统</div>
                <div class="login">
                    <el-input
                        placeholder="请输入账号"
                        prefix-icon="el-icon-mobile-phone"
                        v-model="input21">
                    </el-input>
                </div>
                <div>
                    <el-input
                        placeholder="请输入密码"
                        prefix-icon="el-icon-tickets"
                        v-model="input22">
                    </el-input>
                </div>
                <div class="regi clearFix">
                    <div class="fl">
                        注册
                    </div>
                    <div class="fr">
                        忘记密码
                    </div>
                </div>
                <el-button type="primary" >登陆</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                input21:"",
                input22:""
            }
        },
        mounted() {
            container = document.createElement("div")
            this.$refs.can.appendChild(container)
            camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 1 , 10000)
            camera.position.z = 1000
            scene = new THREE.Scene();
            particles = new Array()
            let PI2 = Math.PI * 2
            let material = new THREE.ParticleCanvasMaterial( {
                color:0x0078de,
                program(context){
                    context.beginPath()
                    context.arc(0,0,1,0,PI2,true)
                    context.fill()
                }
            })
            let i = 0;
            for(let ix = 0;ix < AMOUNTX; ix ++) {
                for(let iy = 0;iy < AMOUNTY;iy ++){
                    particle = particles[i ++] = new THREE.Particle(material)
                    particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) /2 )
                    particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) /2 )
                    scene.add(particle)
                }
            }

            renderer = new THREE.CanvasRenderer()
            renderer.setSize( window.innerWidth, window.innerHeight )
            container.appendChild( renderer.domElement )

            document.addEventListener( 'mousemove', onDocumentMouseMove, false )
            //

            window.addEventListener( 'resize', onWindowResize, false )
            animate()
        },
        methods:{
           
            

        }
        
    }
    var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;

    var container;
    var camera, scene, renderer;

    var particles, particle, count = 0;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;


    // animate();

    function init() {

        

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    //

    function onDocumentMouseMove( event ) {

        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;

    }

    function onDocumentTouchStart( event ) {

        if ( event.touches.length === 1 ) {

            event.preventDefault();

            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;

        }

    }

    function onDocumentTouchMove( event ) {

        if ( event.touches.length === 1 ) {

            event.preventDefault();

            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;

        }

    }

//

    function animate() {

        requestAnimationFrame( animate );

        render();


    }

    function render() {

        camera.position.x += ( mouseX - camera.position.x ) * .05;
        camera.position.y += ( - mouseY - camera.position.y ) * .05;
        camera.lookAt( scene.position );

        var i = 0;

        for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

            for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

                particle = particles[ i++ ];
                particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
                particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 2 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;

            }

        }

        renderer.render( scene, camera );

        count += 0.1;
    }
</script>

<style scoped rel="stylesheet/less" lang="less">
    .form{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        .title{
            font-size: 30px;
            color:white;
            font-family: "楷体";
            margin-bottom: 20px;
           
        }
        .login{
            margin-bottom: 10px;
        }
        .regi{
            margin-top:10px;
            color: white;
        }
    }
</style>